<template>
  <view class="content">
    <view class="body" v-if="alertHistory.length != 0">
      <view class="head">
        <view class="head_con">
          <image src="../../static/icon/record.png"></image>
          <label>警报记录</label>
        </view>
      </view>
      <view
        class="record"
        v-model="alertHistory"
        v-for="(item, index) in alertHistory"
        :key="index"
        @click="ride_details(item)"
      >
        <view class="ride_head">
          <view class="ride">
            <image src="../../static/icon/alert.png"></image>
            <label>警报</label>
          </view>
          <view class="status">
            <text>已结束</text>
          </view>
        </view>
        <view class="ride_con">
          <label>警报时间</label>
          <text>{{ item.time }}</text>
          <br />
          <label>警报原因</label>
          <text>{{ item.cause }}</text>
          <br />
          <label>警报等级</label>
          <text>{{ getLevel(item.level) }}</text>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="pos_none">
        <text>暂无警报记录</text>
      </view>
    </view>
  </view>
</template>

<script>
// 引入请求模块
import { getRequest } from "@/api/api.js";
// 引入url
import { alertRecode } from "@/api/request.js";
export default {
  name: "rideHistory",
  created() {
    // 获取骑行记录数据
    this.getRideHistory();
  },
  data() {
    return {
      alertHistory: [],
      hours: 0,
      minutes: 0,
      seconds: 0,
      // time: "",
    };
  },
  methods: {
    // 获取警报记录
    async getRideHistory() {
      const result = await getRequest(alertRecode);
      console.log(result);
      if (result[1].data.status === 0) {
        if (result[1].data.data) {
          this.alertHistory = result[1].data.data;
          console.log(this.alertHistory);
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "服务器连接失败，请稍后重试！",
          duration: 2500,
        });
      }
    },
    // 报警等级
    getLevel(level) {
      if (level == 3) {
        return "高级";
      } else if (level == 2) {
        return "中等";
      } else {
        return "低等";
      }
    },
    // 跳转详情页面
    ride_details(value) {
      console.log(value);
      let Info = JSON.stringify(value);
      uni.navigateTo({
        url: `/pages/mine/alertDetails?alertInfo=${Info}`,
      });
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: aliceblue;
  position: relative;
  .body {
    padding: 40rpx;
    background-color: aliceblue;
    .head {
      height: 7vh;
      background-color: #fff;
      margin-bottom: 20rpx;
      border-radius: 20rpx;
      .head_con {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 30rpx;
          height: 30rpx;
        }
        label {
          padding-left: 10rpx;
          letter-spacing: 4rpx;
          font-size: 27rpx;
          color: #000000;
        }
      }
    }
    .record {
      background-color: #fff;
      padding: 20rpx 40rpx;
      margin-bottom: 20rpx;
      border-radius: 20rpx;
      .ride_head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #c0c0c0;
        padding-bottom: 20rpx;
        .ride {
          // width: 25%;
          display: flex;
          align-items: center;
          image {
            width: 40rpx;
            height: 40rpx;
            padding: 4rpx;

            border-radius: 50%;
            background-color: rgb(252, 220, 78);
          }
          label {
            padding-left: 16rpx;
            font-size: 28rpx;
            font-weight: 560;
          }
        }
        .status {
          color: #888888;
          font-size: 28rpx;
        }
      }
      .ride_con {
        padding-top: 20rpx;
        font-size: 28rpx;
        label {
          color: #888888;
        }
        text {
          padding-left: 26rpx;
          color: #595959;
        }
      }
    }
  }
  .pos_none {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    text-align: center;
    text {
      color: rgb(206, 204, 204);
      font-size: 50rpx;
    }
  }
}
</style>